<template>
    <section v-loading="list_loading">
  <div class="searchbox">
        <el-form inline  class="demo-form-inline fl" @submit.native.prevent>
               <el-form-item>
            <el-input v-model="search" placeholder="姓名/手机" style="float:left;width:241px;"></el-input>
             </el-form-item>
              <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" v-on:click="getData" >搜索</el-button>
             </el-form-item>
        </el-form>

            <template>
              <!-- `checked` 为 true 或 false -->
              <div style="position:fixed;right:35px;top:130px;width:200px" class="clearfix">
                  <div style="float:left;" class="clearfix">
                    <el-checkbox v-model="yingtaohong" style="float:left" @change="hong_color_s"></el-checkbox>
                    <div style="background:#e75664;width:10px;height:10px; border-radius:10px;cursor:pointer;float:left;margin-left:15px;margin-right:40px;margin-top:4px"></div>
                </div>
                  <div class="clearfix">
                    <el-checkbox v-model="dushihui" style="float:left" @change="hui_color_s"></el-checkbox>
                    <div style="background:#d4d8e3;width:10px;height:10px; border-radius:10px;cursor:pointer;float:left;margin-left:15px;margin-top:4px"></div>
                  </div>
              </div>
            </template>
        </div>
    <div @contextmenu="$parent.addMenu([{name:'刷新报名管理列表',method:'getData'}])">
    <el-table tooltip-effect="dark" highlight-current-row style="width: 100%;text-align:center" :data="baoming_list" >
        <el-table-column prop="real_name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别" width="180"></el-table-column>
        <el-table-column  prop="mobile" label="手机号"></el-table-column>
        <el-table-column  prop="taocan_name" label="套餐"></el-table-column>
        <el-table-column  prop="create_time" label="报名时间"></el-table-column>
        <el-table-column  prop="status" label="状态"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <div v-if="scope.row.remark != ''" style="color:#5AD3B6;cursor:pointer;" @click="click_s(scope.row.id)">备注</div>
                <div v-if="scope.row.remark == ''" style="color:#4D5059;cursor:pointer;" @click="click_s(scope.row.id)">备注</div>
            </template>
        </el-table-column>
        <el-table-column label="标记">
            <template slot-scope="scope">
                <div v-if="scope.row.mark < 1" style="background:#d4d8e3;width:10px;height:10px; border-radius:10px;cursor:pointer;margin: 0 auto" v-on:click="on_tabs(scope.row.id,scope.row.mark)"></div>
                <div v-if="scope.row.mark == 1" style="background:#e75664;width:10px;height:10px; border-radius:10px;cursor:pointer;margin: 0 auto" v-on:click="on_tabs(scope.row.id,scope.row.mark)"></div>
            </template>
        </el-table-column>
    </el-table>

            <div class="breakpage" v-if="page.total>0">
        <el-pagination background layout="total,prev, pager, next"
            :total="parseInt(page.total)"
            :page-size="parseInt(page.pagesize)"
            :current-page="parseInt(page.curpage)"
            @current-change="page_change">
        </el-pagination>
      </div>
  </div>

    <!--弹出框-->
        <el-dialog title="备注" :visible.sync="dialogTableVisible" width="550px">
        <el-form  :rules="rules" label-width="60px">

          <el-form-item label="备注" prop=" ">
            <el-input type="textarea" :rows="15" placeholder="请输入内容" value="textarea" v-model="textarea"> </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" v-on:click="remark_button">保存</el-button>
        </div>
        </el-dialog>
    </section>

</template>

<script>
    //引入请求借口;
    import * as api from '../api/index'
    export default {
        data() {
            return {
                center:true,
                page:[],    //分页数组;
                baoming_list:[],
                list_loading: false,
                search: '',             //搜索内容;
                dialogTableVisible: false,
                textarea:'',
                ids:'',             //弹窗id号码;
                dushihui:false,        //都市灰;
                yingtaohong:false,     //樱桃红;
                rules: { textarea:[{required:true,message:'请输入备注信息',trigger:'blur'}], }
            }
        },

        methods:{
            //点击灰色筛选条件时候;
            hui_color_s:function(){
                if(!this.yingtaohong && !this.dushihui){
                    this.getData();
                }else{
                let params={mark:0}
                api.baoming.pt_color(params,res=>{
                    this.yingtaohong=false;
                    this.baoming_list = res.info;
                    });
                }
            },
            //点击红色筛选条件时候;
            hong_color_s:function(){
                if(!this.yingtaohong && !this.dushihui){
                    this.getData();
                }else{
                let params={mark:1}
                api.baoming.pt_color(params,res=>{
                    this.dushihui=false;
                    this.baoming_list = res.info;
                    })
                }
            },
            //弹框确定按钮,后台请求接口;
            remark_button:function(){
                let params={id:this.ids,textarea:this.textarea}
                api.baoming.pt_remark(params,res=>{
                    if(res.status==1){//更新成功
                        for (let j=0;j<this.baoming_list.length;j++){
                            if(this.baoming_list[j].id==this.ids){
                                this.baoming_list[j].remark = res.info.remark;
                            }
                        }
                    this.dialogTableVisible=false;
                    }else if(res.status==0){
                        console.log('系统繁忙,请稍后重试');
                    }

                })
            },
            //弹出框函数:
            click_s:function(id){
                this.dialogTableVisible=true;
                this.ids=id;            //点击就得到id号码,更新时候用;
                let params={id:id,bool:1}
                 api.baoming.pt_remark(params,res=>{
                    this.textarea=res.info.remark;
                })
            },
            //监听标记点击;
            on_tabs:function(id,mark){
            //获取标记id
            let tabs_id = {id:id,mark:mark}
            api.baoming.tabs(tabs_id,res=>{
                for (let j=0;j<this.baoming_list.length;j++){
                    if(this.baoming_list[j].id==id){
                        this.baoming_list[j].mark = res.info.mark;
                    }
                }
            })
            },

          //点击分页:
          page_change:function(p){
            this.page.p=p;
            this.getData();
          },
            //初次进入加载数据;
            getData:function(){
                if(this.page.p=='undefined') this.page.p=1;
                let params = {str_search:this.search,p:this.page.p}
                api.baoming.getData(params,res=>{
                    this.baoming_list = res.info;
                    this.page = res.page;
                    this.loading= false
                })
            }
        },
        //生命周期函数;
        created(){
            this.getData();
        }
    }
</script>
<style scoped>
.el-dialog__body{adding: 0 0;}
.fade-ender-active, .fade-leave-active{ transition:opacity .5s }
.fade-ender,.fade-leave-active{opacity: 0}
</style>
